<template>
  <div class="customerlist">
    <div class="top111">
      <img @click="fanhui" src="../assets/总图标包含整个系统的/fanhui.png" />
      <span>客户详情</span>
      <img
        class="aaaa"
        src="../assets/总图标包含整个系统的/fanhuishouye.png"
        @click="fanhuish"
      />
    </div>
    <div class="box">
      <div class="left">
        <img src="../assets/总图标包含整个系统的/头像.png" />
        <span>张全有</span>
      </div>
      <div class="right" @click="bianji">
        <van-icon name="todo-list-o" /><span>编辑信息</span>
      </div>
    </div>
    <div class="content">
      <div class="box_top">
        <img src="../assets/总图标包含整个系统的/基本信息.png" />
        <h4>基本信息</h4>
      </div>
      <div class="box_c">
        <span>客户名称</span>
        <p>{{ custName }}</p>
      </div>
      <div class="box_c">
        <span>联系电话</span>
        <a href="#">{{ telephone }}</a>
      </div>
      <div class="box_c">
        <span>学历</span>
        <p>{{ education }}</p>
      </div>
      <div class="box_c">
        <span>性别</span>
        <p>{{ sex }}</p>
      </div>
      <div class="box_c">
        <span>年龄</span>
        <p>{{ age }}</p>
      </div>
      <div class="box_c">
        <span>所属城市</span>
        <p>{{ cityName }}</p>
      </div>
      <div class="box_c">
        <span>公司名称</span>
        <p>{{ company }}</p>
      </div>
      <div class="box_c">
        <span>职位</span>
        <p>{{ position }}</p>
      </div>
      <div class="box_c">
        <span>录入时间</span>
        <p>{{ createTime }}</p>
      </div>
    </div>
  </div>
</template>
 
<script>
import { GetCourierKehuPingXList } from "../request/aip";
export default {
  data() {
    return {
      custName: "",
      telephone: "",
      education: "",
      sex: "",
      age: "",
      cityName: "",
      company: "",
      position: "",
      createTime: "",
      id: "",
    };
  },
  created() {
    // console.log(this.$route.params.id);
    GetCourierKehuPingXList({
      id: this.$route.params.id,
    }).then((res) => {
      console.log(res);

      this.custName = res.data.custName;
      this.telephone = res.data.telephone;
      this.education = res.data.education || "本科";
      this.sex = res.data.sex;
      this.age = res.data.age;
      this.cityName = res.data.cityName;
      this.company = res.data.company;
      this.position = res.data.position || "普工";
      this.createTime = res.data.createTime;
      this.id = res.data.id;
    });
  },
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
    fanhuish() {
      this.$router.push("/index");
    },
    bianji() {
      this.$router.push({
        name: "CustomerlistX",
        query: {
          custName: this.custName,
          telephone: this.telephone,
          education: this.education,
          sex: this.sex,
          age: this.age,
          cityName: this.cityName,
          company: this.company,
          position: this.position,
          id: this.id,
        },
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.customerlist {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2800188753,1941502220&fm=26&gp=0.jpg")
      no-repeat,
    url("../assets/总图标包含整个系统的/底纹.png") center bottom no-repeat;
  background-size: 100%;
}
.top111 {
  background-color: #023293;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  padding: 10px;
  img {
    width: 10px;
  }
  .aaaa {
    width: 20px;
  }
}
.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.right {
  width: 100px;
  height: 40px;
  border-radius: 20px 0px 0px 20px;
  background-color: rgba(255, 255, 255, 0.2);
  line-height: 40px;
  color: #fff;
  padding-left: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  span {
    margin-left: 8px;
  }
}
.left {
  display: flex;
  align-items: center;
  img {
    width: 60px;
    margin: 0 20px;
  }

  span {
    color: #fff;
  }
}
.content {
  width: 90vw;
  height: 100px;
  margin: auto;
  background-color: #fff;
  margin-top: 20px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;

  .box_top {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid#f2f2f2;
    margin-bottom: 10px;
    img {
      width: 20px;
      margin-right: 10px;
    }
  }
  .box_c {
    display: flex;
    margin-bottom: 10px;
    span {
      color: #ccc;
      margin-right: 10px;
      text-align: right;
      font-size: 14px;
      width: 28%;
    }
    p {
      font-size: 14px;
    }
  }
}
</style>